<template>
  <div class="full">
    <el-scrollbar>
      <div class="dlText-120 list-b-12 p-12">
        <CellBox title="彩稿上传">
          <ElImgListBox :data="data.productColorDraftFileList" urlKey="draftFileUrl"
            :isEdit="isEdit && data.baseData.isLocked !== 1" :width="160" :operate="[
              {
                title: '删除',
                icon: 'Delete',
                click: (row: any, index: number) => {
                  proxy.$messageBox('是否删除当前彩稿，请确认！', () => {
                    proxy.$api.OrderBusniess.DeleteProductColorDratfFile({
                      productColorDraftCode: row.productColorDraftCode,
                    }).then((res: any) => {
                      proxy.$message(`删除成功`);
                      data.productColorDraftFileList.splice(index, 1)
                    });
                  });
                }
              }
            ]" @changeBtn="(files: any, dataInfo: any, res: any) => {
              let _productCode = props.data.baseData.productCode
              proxy.$api.OrderBusniess.SaveColorDratfFile({
                productCode: _productCode, // 产品编码
                productColorDraftFileList: [
                  {
                    productCode: _productCode, //产品编码
                    productColorDraftCode: '', //彩稿文件编号（唯一识别码）
                    draftFileName: res.fileName, //彩稿文件名称
                    draftFileType: res.fileSuffix, //文件类型（存储文件后缀名）
                    draftFileSize: res.fileSize, //彩稿文件大小，单位：KB
                    draftFileUrl: res.fileUrl, //文件存储地址（相对路径）
                    draftFilePreview: res.fileUrl, //预览图片
                    url: res.fileUrl,
                    uploadPerson: '', //
                    uploadTime: proxy.$time(new Date()),
                    colorDraftType: 0,
                    productTagCode: '',
                    draftFileState: 0,
                  }
                ]
              })
                .then((res: any) => {
                  dataInfo.loading = false
                  emit('saveBtn')
                })
                .catch(() => {
                  dataInfo.loading = false
                });
            }" />
        </CellBox>
        <el-divider />
        <CellBox title="颜色信息">
          <TableBoxMx :data="{
            disabled: !isEdit || data.baseData.isLocked === 1,
            tbody: data.productPrintingColorList,
            thead: [
              {
                label: '颜色名称',
                prop: 'colorName',
                align: 'center',
                width: 260,
              },
              {
                label: '颜色参考',
                prop: 'colorReference',
                align: 'center',
                width: 160,
                formType: 'select', //文件类型
                options: proxy.$optionsArr.colorType
              },
              {
                label: '备注',
                prop: 'colorRemark',
                align: 'center',
                formType: 'text', //文件类型
              }
            ],
            //操作
            operation: [
              {
                label: '删除',
                icon: 'Delete'
              }
            ],
            add: {
              productPrintingColorID: null, // 产品印刷色主键ID
              productPrintingColorCode: '', // 产品印刷色代码（唯一识别码）
              productCode: '', // 产品编码
              colorCode: '', // 颜色代码（关联印刷颜色信息表中颜色代码）
              colorReference: 1, // 颜色参考：1彩稿；2样表；3封样
              colorRemark: '', // 颜色备注
              colorType: 0 // 颜色类型
            }
          }">
            <template #colorName="{ row }" v-if="isEdit && data.baseData.isLocked !== 1">
              <ElAutocompleteBox :data="row" dataName="colorName" :searchBtn="(queryString: string, row: any, dataInfo: any, getQuerySearch: Function) => {
                proxy.$api.System.QueryPrintingColorDataList({
                  useType: 2,
                  colorType: 0,
                  likeWords: queryString,
                }).then((res: any) => {
                  dataInfo.options = res.map((el: any) => ({
                    ...el,
                    label: el.colorName,
                    value: el.colorName,
                  }))
                  getQuerySearch()
                });
              }" :addBtn="(value: string, dataInfo: any) => {
                proxy.$api.System.AddPrintingColor({
                  useType: 2,
                  colorType: 1,
                  colorName: value,
                }).then((res: any) => {
                  row.colorCode = res
                })
              }" @changeBtn="(item: any) => {
                row.colorCode = item.colorCode
              }" />
            </template>
          </TableBoxMx>
        </CellBox>
        <el-divider />
        <el-affix position="bottom" :offset="60" v-if="isEdit && data.baseData.isLocked !== 1">
          <div class="flex-center-center list-r-8">
            <el-button type="primary" @click="saveBtn">保存彩稿信息</el-button>
          </div>
        </el-affix>
      </div>
    </el-scrollbar>
  </div>
</template>
<script setup lang="ts">
import '../pageCss.scss'; // 引入样式
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data?: any;//数据源
    isEdit?: boolean;//是否編輯
    options?: any;//数据组
    setState?: Function;//更改状态
  }>(),
  {
  },
);
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'saveBtn'): void;
}>();
const saveBtn = () => {
  Promise.all([
    UpdateProductTechnique(),//修改颜色信息
  ]).then((res: any) => {
    if (typeof props.setState === 'function') {
      props.setState(3, '保存成功')
    }
  }).catch(() => {

  });
};
//修改生产工艺信息
const UpdateProductTechnique = () => {
  return new Promise((resolve, reject) => {
    let _data = props.data
    let _productCode = _data.baseData.productCode
    proxy.$api.OrderBusniess.UpdateProductPrintingColor({
      productCode: _productCode, // 产品编码
      productPrintingColorList: _data.productPrintingColorList.map((el: any) => ({
        productCode: _productCode, // 产品编码
        productPrintingColorID: el.productPrintingColorID, // 主键
        productPrintingColorCode: el.productPrintingColorCode, // 唯一编码
        colorCode: el.colorCode, // 颜色代码（关联印刷颜色信息表中颜色代码）
        colorReference: el.colorReference, // 颜色参考：1彩稿；2样表；3封样
        colorRemark: el.colorRemark, // 颜色备注
        colorType: el.colorType || 0, // 颜色类型
      }))
    })
      .then((res: any) => {
        resolve(res)
      })
      .catch((e: any) => {
        reject(e)
      });
  });
};
onMounted(() => {

});
</script>
